import React, { FC, useState } from 'react'
import { useRequest, useTitle } from 'ahooks'
import { Typography, Empty, Table, Tag, Button, Space, Modal, Spin, message } from 'antd'
import styles from '../../common/common.module.scss'
import { ExclamationCircleOutlined } from '@ant-design/icons'
const { Title } = Typography
import type { ColumnsType } from 'antd/es/table'
import ListSearch from '../../../components/ListSearch/ListSearch'
const { confirm } = Modal
import useLoadQuestionList from '../../../hooks/useLoadQuestionList'
import ListPage from '../../../components/ListPage/ListPage'
import { updateQuestionService, deleteQuestionsService } from '../../../service/question'

const Trash: FC = () => {
  useTitle('小慕问卷-回收站')
  const [selectedIds, setSelectedIds] = useState<string[]>([])
  const { data = {}, loading, refresh } = useLoadQuestionList({ isDeleted: true })
  const { list = [], total = 0 } = data
  type DataType = {
    _id: string
    title: string

    isPublished: boolean
    isStar: boolean
    answerCount: number
    createdAt: string
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '是否发布',
      dataIndex: 'isPublished',
      key: 'isPublished',
      render: (isPublished: boolean) => {
        return isPublished ? <Tag color="blue">已发布</Tag> : <Tag>已发布</Tag>
      },
    },
    {
      title: '回答次数',
      dataIndex: 'answerCount',
      key: 'answerCount',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
  ]
  const del = () => {
    confirm({
      title: '确认彻底删除？',
      icon: <ExclamationCircleOutlined />,
      content: '删除后不可找回',
      onOk: deleteHandler,
    })
  }
  const { loading: deleteLoading, run: deleteHandler } = useRequest(
    async () => {
      await deleteQuestionsService(selectedIds)
    },
    {
      manual: true,
      onSuccess: () => {
        setSelectedIds([])
        refresh()
      },
    }
  )
  const { loading: recoverLoading, run: recover } = useRequest(
    async () => {
      for await (const id of selectedIds) {
        await updateQuestionService(id, { isDeleted: false })
      }
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess: () => {
        message.success('恢复成功')
        setSelectedIds([])

        refresh()
      },
    }
  )
  const TableElement = (
    <>
      <div style={{ marginBottom: '16px' }}>
        <Space>
          <Button
            type="primary"
            disabled={selectedIds.length === 0}
            onClick={recover}
            loading={recoverLoading}
          >
            恢复
          </Button>
          <Button danger onClick={del} loading={deleteLoading}>
            彻底删除
          </Button>
        </Space>
      </div>
      <Table
        rowSelection={{
          type: 'checkbox',
          onChange: selectedRowkeys => {
            setSelectedIds(selectedRowkeys as string[])
          },
        }}
        columns={columns}
        dataSource={list}
        rowKey={q => q._id}
        pagination={false}
      />
    </>
  )

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin></Spin>
          </div>
        )}
        {!loading && list.length === 0 && <Empty description="暂无数据" />}
        {!loading && list.length > 0 && TableElement}
      </div>
      <div className={styles.footer}>
        <ListPage total={total}></ListPage>
      </div>
    </>
  )
}
export default Trash
